<script setup lang="ts">
import { ref, onMounted } from 'vue';

const props = defineProps<{
  keyword: string;
}>();

const dietList = ref<any[]>([]);
const loading = ref(true);

onMounted(() => {
  loadDietData();
});

const loadDietData = async () => {
  loading.value = true;
  console.log('💪 加载减肥方案数据，关键词：', props.keyword);

  setTimeout(() => {
    dietList.value = [
      { id: 1, name: `${props.keyword} - 低卡饮食计划` },
      { id: 2, name: `${props.keyword} - 高蛋白健身餐` },
    ];
    loading.value = false;
  }, 1000);
};
</script>

<template>
  <div class="diet-content">
    <h3>💪 减肥方案搜索结果</h3>
    <p v-if="loading">🔄 加载中...</p>
    <ul v-else>
      <li v-for="item in dietList" :key="item.id" class="diet-item">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<style scoped>
.diet-content {
  padding: 16px;
}
.diet-item {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}
</style>